
.score-box {
    vertical-align: bottom;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

    .score-box label,
    .score-box .val {
        font-size: 0.9em;
        margin-top: 0.4rem;
    }

    .score-box label {
        /* margin-right: .5rem; */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* max-width: 10rem; */
        line-height: 1;
        text-align: center;
        flex: 1 1 100%;
        /* display: none; */
        display: flex;
        align-items: baseline;
        justify-content: center;
    }

        .score-box label > span:first-child {
            white-space: nowrap;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 8rem;
        }

    /*tr:not(.isParent) .score-box label
 {
    flex: 1;
}*/
    .score-box .outer {
        display: inline-block;
        position: relative;
        vertical-align: bottom;
        margin-top: 16px;
        /* border: 1px solid rgb(211 211 211 / 10%); */
        width: 1em;
        height: 2em;
    }

        .score-box .outer .inner:before,
        .score-box .outer:before {
            content: "";
            position: absolute;
            height: 100%;
            opacity: 0.25;
            -moz-transform: skewY(45deg);
            -o-transform: skewY(45deg);
            -webkit-transform: skewY(45deg);
            transform: skewY(45deg);
        }



        .score-box .outer .inner:after,
        .score-box .outer:after {
            content: "";
            position: absolute;
            width: 100%;
            opacity: 0.45;
            -moz-transform: skewX(45deg);
            -o-transform: skewX(45deg);
            -webkit-transform: skewX(45deg);
            transform: skewX(45deg);
        }

    .score-box:not(.ball) .outer:before,
    .score-box:not(.ball) .outer:after {
        /*border: var(--box-border);*/
        background-color: inherit;
        opacity: .5;
    }

    .score-box .outer .inner {
        position: absolute;
        bottom: 0;
        width: 100%;
    }


    .score-box .outer:before,
    .score-box .inner:before {
        left: calc(-1*var(--box-3d));
        bottom: calc(var(--box-3d)/2);
        width: var(--box-3d);
    }

    .score-box .outer:after,
    .score-box .inner:after {
        top: calc(-1*var(--box-3d));
        left: calc(var(--box-3d)/-2);
        height: var(--box-3d);
    }

    .score-box .outer [data-rank] {
        color: white;
    }



    .score-box .outer .inner:before,
    .score-box .outer .inner:after {
        background-color: inherit;
    }

    .score-box .slider-wrapper {
        display: none;
        position: absolute;
        bottom: 0;
        right: -1.5rem;
        top: 1rem;
    }

    .score-box .outer small {
        font-size: 10px;
    }

    /*#region score ball */
    .score-box.ball {
        margin: 0;
    }


    .score-box.ball {
        justify-content: center;
    }

        /*   .score-box.ball > div {
        width:4em;
    }
*/
        .score-box.ball .outer {
            height: 1em;
            border-radius: 100%;
            opacity: 1;
            margin: 0;
            line-height: 1em;
            box-shadow: inset 1px -3px 7px 5px rgb(0 0 0 / 12%);
        }

        .score-box.ball .val {
            font-size: 0.4em;
            margin: 0;
            text-align: center;
            color: white;
            text-shadow: 0px 0px 5px rgb(0 0 0 / 90%);
            /*opacity:.8;*/
        }

    .score-box.rect .outer {
        border-radius: 3px;
        font-size: 2em !important;
        line-height: 1.2;
        height: 1.2em;
        width: 1.2em;
        align-items: center;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .score-box.rect .val {
        /* text-shadow: unset; */
        /*font-weight:normal;*/
        /* color:
        black; */
    }
        .score b:after, .score-box.rect .val:after {
            content: 'התאמה';
            display: block;
            font-size: 9px;
        }


.score b {
    display:flex !important;
    align-items: flex-end;
    width: 5.6em;
    gap: 2px;
    justify-content: center;
}